@if (isShowAlert) {
  <mtx-alert type="info" dismissible (closed)="onAlertDismiss()">
    🎉 Introducing
    <a [href]="introducingItem.link" target="_blank">{{ introducingItem.name }}</a>
    - {{ introducingItem.description }}
    <a [href]="introducingItem.link" target="_blank">Learn more!</a>
  </mtx-alert>
}

<div class="row">
  <!-- Statistics -->
  @for (stat of stats; track $index) {
    <div class="col-sm-6 col-md-3">
      <mat-card [class]="['text-white', 'b-0', stat.color]">
        <mat-card-header>
          <mat-card-subtitle class="text-white">{{ stat.title }}</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
          <h2 class="m-t-0 m-b-8">{{ stat.amount }}</h2>
          <mtx-progress
            [value]="stat.progress.value"
            height="2px"
            foreground="rgba(255,255,255,1)"
            background="rgba(0,0,0,.4)"
          />
          <small class="text-muted">Monthly</small>
        </mat-card-content>
      </mat-card>
    </div>
  }

  <!-- Charts -->
  <div class="col-md-7">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Traffic</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div id="chart1"></div>
      </mat-card-content>
    </mat-card>
  </div>
  <div class="col-md-5">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Weekly Revenue</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div id="chart2"></div>
      </mat-card-content>
    </mat-card>
  </div>

  <!-- Others -->
  <div class="col-md-6">
    <mat-card>
      <mat-tab-group>
        <mat-tab label="First">
          <div class="m-16">
            <img class="d-block w-full" src="images/pixabay/2.jpg" alt="" />
            <h3>
              Aenean viverra arcu nec pellentesque ultrices. In erat purus, adipiscing nec lacinia
              at, ornare ac eros.
            </h3>
            <p>
              Nullam at risus metus. Quisque nisl purus, pulvinar ut mauris vel, elementum suscipit
              eros. Praesent ornare ante massa, egestas pellentesque orci convallis ut. Curabitur
              consequat convallis est, id luctus mauris lacinia vel. Nullam tristique lobortis
              mauris, ultricies fermentum lacus bibendum id. Proin non ante tortor. Suspendisse
              pulvinar ornare tellus nec pulvinar. Nam pellentesque accumsan mi, non pellentesque
              sem convallis sed. Quisque rutrum erat id auctor gravida.
            </p>
          </div>
        </mat-tab>
        <mat-tab label="Second">
          <div class="m-16">
            <img class="d-block w-full" src="images/pixabay/8.jpg" alt="" />
            <h3>Vestibulum vitae diam nec odio dapibus placerat. Ut ut lorem justo.</h3>
            <p>
              Fusce bibendum augue nec fermentum tempus. Sed laoreet dictum tempus. Aenean ac sem
              quis nulla malesuada volutpat. Nunc vitae urna pulvinar velit commodo cursus. Nullam
              eu felis quis diam adipiscing hendrerit vel ac turpis. Nam mattis fringilla euismod.
              Donec eu ipsum sit amet mauris iaculis aliquet. Quisque sit amet feugiat odio. Cras
              convallis lorem at libero lobortis, placerat lobortis sapien lacinia. Duis sit amet
              elit bibendum sapien dignissim bibendum.
            </p>
          </div>
        </mat-tab>
        <mat-tab label="Third">
          <div class="m-16">
            <img class="d-block w-full" src="images/pixabay/16.jpg" alt="" />
            <h3>
              Maecenas eget turpis luctus, scelerisque arcu id, iaculis urna. Interdum et malesuada
              fames ac ante ipsum primis in faucibus.
            </h3>
            <p>
              Morbi placerat est nec pharetra placerat. Ut laoreet nunc accumsan orci aliquam
              accumsan. Maecenas volutpat dolor vitae sapien ultricies fringilla. Suspendisse vitae
              orci sed nibh ultrices tristique. Aenean in ante eget urna semper imperdiet.
              Pellentesque sagittis a nulla at scelerisque. Nam augue nulla, accumsan quis nisi a,
              facilisis eleifend nulla. Praesent aliquet odio non imperdiet fringilla.
            </p>
          </div>
        </mat-tab>
      </mat-tab-group>
    </mat-card>
    <mat-card>
      <mat-card-header>
        <mat-card-title>Album</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <mat-grid-list cols="2">
          <mat-grid-tile class="bg-violet-95">1</mat-grid-tile>
          <mat-grid-tile class="bg-magenta-95">2</mat-grid-tile>
          <mat-grid-tile class="bg-orange-95">3</mat-grid-tile>
          <mat-grid-tile class="bg-azure-95">4</mat-grid-tile>
        </mat-grid-list>
      </mat-card-content>
    </mat-card>
  </div>

  <div class="col-md-6">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Avatar List</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <mat-list>
          @for (message of messages; track $index) {
            <mat-list-item>
              <img matListItemAvatar [src]="message.img" alt="Avatar" />
              <h3 matListItemTitle>{{ message.subject }}</h3>
              <p matListItemLine>{{ message.content }}</p>
            </mat-list-item>
          }
        </mat-list>
      </mat-card-content>
    </mat-card>

    <mat-card>
      <mat-card-header>
        <mat-card-title>Revenue Table</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <table class="w-full" mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef>No.</th>
            <td mat-cell *matCellDef="let element">{{ element.position }}</td>
          </ng-container>
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef>Name</th>
            <td mat-cell *matCellDef="let element">{{ element.name }}</td>
          </ng-container>
          <ng-container matColumnDef="weight">
            <th mat-header-cell *matHeaderCellDef>Weight</th>
            <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
          </ng-container>
          <ng-container matColumnDef="symbol">
            <th mat-header-cell *matHeaderCellDef>Symbol</th>
            <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
      </mat-card-content>
    </mat-card>

    <mat-card>
      <mat-card-header>
        <mat-card-title>Chips & Buttons</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <h3 class="m-t-0">Chips</h3>
        <mat-chip-listbox>
          <mat-chip-option selected>One fish</mat-chip-option>
          <mat-chip-option color="primary">Primary fish</mat-chip-option>
          <mat-chip-option color="accent">Accent fish</mat-chip-option>
          <mat-chip-option color="warn">Two fish</mat-chip-option>
        </mat-chip-listbox>
        <h4>Custom chip colors</h4>
        <mat-chip-listbox>
          <mat-chip-option class="bg-orange-{{ isDark ? 50 : 90 }}">Orange fish</mat-chip-option>
          <mat-chip-option class="bg-blue-{{ isDark ? 50 : 90 }}">Blue fish</mat-chip-option>
          <mat-chip-option class="bg-cyan-{{ isDark ? 50 : 90 }}">Cyan fish</mat-chip-option>
          <mat-chip-option class="bg-red-{{ isDark ? 50 : 90 }}" selected>Red fish</mat-chip-option>
          <mat-chip-option class="bg-green-{{ isDark ? 50 : 90 }}">Green fish</mat-chip-option>
        </mat-chip-listbox>

        <h3>Buttons</h3>
        <div class="d-flex flex-wrap align-items-center gap-8">
          <button matButton>Text</button>
          <button matButton="elevated">Elevated</button>
          <button matButton="outlined">Outlined</button>
          <button matButton="filled">Filled</button>
          <button matButton="tonal">Tonal</button>
          <button matIconButton>
            <mat-icon>more_vert</mat-icon>
          </button>
          <button matFab>
            <mat-icon>delete</mat-icon>
          </button>
          <button matMiniFab>
            <mat-icon>menu</mat-icon>
          </button>
          <button matFab extended>
            <mat-icon>favorite</mat-icon>
            Basic
          </button>
        </div>
        <h4>Custom button colors</h4>
        <div class="d-flex flex-wrap align-items-center gap-8">
          <button matButton="filled" class="bg-orange-90 text-dark">Orange</button>
          <button matButton="filled" class="bg-blue-90 text-dark">Teal</button>
          <button matButton="filled" class="bg-cyan-90 text-dark">Cyan</button>
          <button matButton="filled" class="bg-red-90 text-dark">Purple</button>
          <button matButton="filled" class="bg-green-90 text-dark">Green</button>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
</div>
